/**
 * @file: 客户来源
 * @author: Lengxx
 * @date: 2024-07-17
 */
<template>
  <div class="pt-2">
    <div class="min-h-[300px]" ref="chartRef"></div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { getCustomerSource } from '@/api/screen';
  import { useRequest } from '@vben/hooks';
  import { useECharts } from '@/hooks/web/useECharts';
  import { ScreenTheme, getColor2, getColor1 } from '../../../configs';

  const { loading, data } = useRequest(getCustomerSource);

  const chartRef = ref();

  const { setOptions, getInstance } = useECharts(chartRef, 'dark');

  loading ? getInstance()?.showLoading() : getInstance()?.hideLoading();

  const colorList = [
    getColor1(0.18, 1.1, 0.8),
    getColor1(-0.1, 0.26, 0.8),
    getColor1(0, 0, 0.8),
    getColor2(0.8, 0, 0.8),
    getColor2(0.8, 0.35, 0.8),
    getColor2(0.8, 0.65, 0.8),
    getColor2(0.6, 0.75, 0.8),
    getColor2(0.6, 0.65, 0.8),
  ];

  watch(data, () => {
    const chartData = (data.value || []).map((item, index) => {
      return {
        ...item,
        itemStyle: {
          color: colorList[index],
        },
      };
    });
    if (chartData) {
      setChartOptions(chartData);
    }
  });

  function setChartOptions(data: any[]) {
    setOptions({
      backgroundColor: '#181c41',
      title: {
        text: '客户来源分布',
        textStyle: {
          fontSize: 14,
          fontWeight: 600,
          color: ScreenTheme.titleColor,
        },
      },
      tooltip: {
        show: true,
        backgroundColor: 'rgba(14, 165, 233, 0.5)',
        textStyle: {
          color: '#fff',
        },
        shadowColor: 'rgba(14, 165, 233, 0.5)',
        borderColor: 'rgba(14, 165, 233, 1)',
      },
      series: [
        {
          type: 'pie',
          startAngle: 100,
          roseType: 'radius',
          radius: ['20%', '50%'],
          data: data,
          label: {
            formatter: (params) => {
              const resultArr = [
                `{a|${params.name}}`,
                `{b|${params.value}}`
              ]
              return resultArr.join('\n')
            },
            rich: {
              a: {
                fontWeight: 600
              },
              b: {
                color: ScreenTheme.titleColor
              }
            }
          },
          itemStyle: {
            borderColor: ScreenTheme.borderColor,
            borderWidth: 1,
            shadowColor: ScreenTheme.borderColor,
            shadowBlur: 8
          }
        },
      ],
    });
  }
</script>

<style lang="scss" scoped>
</style>
